<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天室</title>
    <script src="{{static_url('js/jquery.min.js')}}"></script>
    <style>
        #contents {
            min-height: 600px;
            background: #EEEEEE;
            max-height: 800px;
            overflow: scroll;
        }

        .message img {
            max-height: 50px;
            display: block;
            margin-top: 5px;
            margin-bottom: 10px;
        }

        .avatar {
            float: left;
            border: 1px solid #DDDDDD;
            padding: 2px;
            margin: 0 5px 0 5px;
        }

        .triangle-isosceles {
            position: relative;
            padding: 10px;
            margin: 23px 0 15px;
            color: #000;
            background: #D3FF93; /* default background for browsers without gradient support */
            background: -webkit-gradient(linear, 0 0, 0 100%, from(#EFFFD7), to(#D3FF93));
            background: -moz-linear-gradient(#EFFFD7, #D3FF93);
            background: -o-linear-gradient(#EFFFD7, #D3FF93);
            background: linear-gradient(#EFFFD7, #D3FF93);
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            -moz-box-shadow: 1px 1px 2px hsla(0, 0%, 0%, 0.3);
            -webkit-box-shadow: 1px 1px 2px hsla(0, 0%, 0%, 0.3);
            box-shadow: 1px 1px 2px hsla(0, 0%, 0%, 0.3);
        }

        .triangle-isosceles:hover {
            top: -2px;
            left: -2px;
            -moz-box-shadow: 3px 3px 2px hsla(0, 0%, 0%, 0.3);
            -webkit-box-shadow: 3px 3px 2px hsla(0, 0%, 0%, 0.3);
            box-shadow: 3px 3px 2px hsla(0, 0%, 0%, 0.3);
        }

        .triangle-isosceles.top {
            background: -webkit-gradient(linear, 0 0, 0 100%, from(#D3FF93), to(#EFFFD7));
            background: -moz-linear-gradient(#D3FF93, #EFFFD7);
            background: -o-linear-gradient(#D3FF93, #EFFFD7);
            background: linear-gradient(#D3FF93, #EFFFD7);
        }

        .triangle-isosceles:after {
            content: "";
            position: absolute;
            bottom: -9px;
            left: 15px;
            border-width: 9px 21px 0;
            border-style: solid;
            border-color: #D3FF93 transparent;
            display: block;
            width: 0;
        }

        .triangle-isosceles.top:after {
            top: -9px;
            left: 15px;
            bottom: auto;
            border-width: 0 9px 9px;
            border-color: #D3FF93 transparent;
        }

    </style>
</head>
<body>
    <div id="contents"></div>
    <div>
        <textarea id="msg"></textarea>
        <a href="javascript:;" onclick="sendMsg()">发送</a>
    </div>
    <script type="text/javascript">
        let username=null;
        let msg=null;
        username = localStorage.getItem('chat_username');
        if(!username){
           username = prompt('请输入你的用户名');
           if (!username){
                username = "游客"+ Math.floor(Math.random()*1000000);
           }
           username = removeHTMLTag(username);
           localStorage.setItem('chat_username', username);
       }
        let ws = new WebSocket("ws://127.0.0.1:8090/chat");
        console.log(ws);
        ws.onopen = function(){
            //发送登录消息
            msg = {"type":"login", "msg":username};
            ws.send(JSON.stringify(msg));
        };

        ws.onmessage = function(data){
            let msg = JSON.parse(data.data);
           // let content_html = "<div><img src=\"http://lorempixel.com/38/38/?7f00000108fc0000ef39\">"+msg.send_user+"<br>"+msg.time+"<span>"+msg.content+"</span></div>";
            let content_html = '<div class="message"><img src="' + msg.avatar + '" class="avatar">' + msg.send_user + ' <br>' + msg.time + '<p class="triangle-isosceles top">' + msg.content + '</p></div>';
            let obj = $("#contents");
            obj.append(content_html);
            obj.scrollTop(obj[0].scrollHeight);
        };

        function sendMsg() {
            let content = removeHTMLTag($("#msg").val());
            if(content.length>1) {
                console.log(content.length);
                msg = {"type":"msg", "msg":content};
                ws.send(JSON.stringify(msg));
            }
            $("#msg").val('')
        }

        //过滤HTML标签
        function removeHTMLTag(str) {
            str = str.replace(/<\/?[^>]*>/g, ''); //去除HTML tag
            str = str.replace(/[ | ]*\n/g, '\n'); //去除行尾空白
            str = str.replace(/\n[\s| | ]*\r/g,'\n'); //去除多余空行
            str = str.replace(/ /ig, ''); //去掉
            return str;
        }

        //输入框绑定回车事件
        $('#msg').bind('keyup', function(event) {
        　　if (event.keyCode == "13") {
        　　　　//回车触发发消息　　
               sendMsg(); 　
        　　}
        });

        $.get('http://127.0.0.1:8090/user',function (xhr) {
            console.log(xhr);
        });
    </script>
</body>
</html>